import React ,{Component} from 'react'
import {
  Card,
  Table,
  Button,
  Icon,
  message,
  Modal
} from 'antd'

import LinkButton from '../../components/link-button'
// 
import {reqCategorys,reqUpdateCategory,reqAddCategory} from '../../api'

import AddForm from './add-form'
import UpdateForm from './update-form'


export default class Category extends Component{

    state = {
      categorys:[],  // 一级分类列表
      subCategorys: [], // 二级分类列表
      loading:false,  // 是否正在获取数据中
      parentId:'0',   //  当前需要显示的分类列表的父分类ID
      parentName:'',  // 当前需要显示的分类列表的父分类名称
      showStatus:0,  // 标识添加/更新的确认框是否显示, 0: 都不显示, 1: 显示添加, 2: 显示更新
    }
    // 初始化Table所有列的数组
    initColumns =()=>{
      this.columns =  [
        {
          title: '分类的名称',
          dataIndex: 'name',  // 显示数据对应的属性名
        },
        {
          title: '操作',
          width:300,
          render: (category) => (
            <span>
              <LinkButton onClick={ ()=>{ this.showUpdate(category)   }}>修改分类</LinkButton>
               { /* onClick={this.showSubCategorys(category)} 渲染的时候就调用 showSubCategorys方法
               <LinkButton onClick={this.showSubCategorys(category)}>查看子分类</LinkButton> 
               需要点击的时候调用
              */}
              {/*如何向事件回调函数传递参数: 先定义一个匿名函数, 在函数调用处理的函数并传入数据*/}
              { this.state.parentId==='0' ? <LinkButton onClick={ ()=>{  this.showSubCategorys(category) } }>查看子分类</LinkButton>: null }
            </span>
          )
        }
      ];
    }

    //   显示指定一级分类列表
    showCategorys = ()=>{
       // 更新为显示一列表的状态
       this.setState({
          parentId:'0',
          parentName:'',
          subCategorys:[],
       })
    }


    // 响应点击取消: 隐藏确定框
    handleCancel = ()=>{
        // 清除输入数据
       this.form.resetFields()
       this.setState({
          showStatus:0,
       })
    }
   
    // 显示添加输入框
    showAdd = () =>{
        this.setState({
            showStatus:1
        })
    }
   
      /*
       显示修改的确认框
    */
    showUpdate = (category) => {
      // 保存分类对象
      this.category = category
      // 更新状态
      this.setState({
        showStatus: 2
      })
   }
    // 添加分类
    addCategory = ()=>{
      this.form.validateFields(async (err, values) => {
        if(!err){
          // 1. 隐藏确定框
          this.setState({
            showStatus: 0
          })
          // 2. 收集数据 提交添加分类请求
          //const { parentId,categoryName} = this.form.getFieldsValue()
          const { parentId,categoryName} = values
          // 清除输入数据
          this.form.resetFields()
          const res = await reqAddCategory(categoryName,parentId)
          if(res.status===0){
              // 添加的分类就是当前分类列表下的分类
              if(parentId===this.state.parentId) {
                // 重新获取当前分类列表显示
                console.log('parentId---0000',parentId);
                console.log('parentId---1111',this.state.parentId);
                this.getCategorys()
              } else if (parentId==='0'){ // 在二级分类列表下添加一级分类, 重新获取一级分类列表, 但不需要显示一级列表
                this.getCategorys('0')
                console.log('parentId---2222',parentId);
                console.log('parentId---3333',this.state.parentId);
                // 在二级分类下 添加一级分类 成功后页面也跳转显示一级分类列表
                // this.setState({parentId:'0'},()=>{
                //    this.getCategorys()
                // })
              }else{
                // 在一级下添加二级 不要处理 
                console.log('66666666666666666');
              }
          }
        }
      })
      
    }

    // 修改一级/二级分类
    updateCategory = ()=>{
       // 进行表单验证, 只有通过了才处理
       this.form.validateFields(async (err, values) => {
          if(!err){
              // 1. 隐藏确定框
              this.setState({
                showStatus: 0
            })
            const categoryId = this.category._id
            //const categoryName = this.form.getFieldValue('categoryName')
            const { categoryName } = values
            // 清除输入数据
            this.form.resetFields()
            // 2. 发请求更新分类
            const res = await reqUpdateCategory({categoryId,categoryName})
            if(res.status===0){
                  // 3. 重新显示列表
                this.getCategorys()
            }
          }
       })
    }

    // 显示指定一级分类下 的二级分类列表
    showSubCategorys =(category)=>{
       // 更新状态 
       this.setState({
         parentId:category._id,
         parentName:category.name
       },()=>{ // 在状态更新且重新render()后执行
         console.log('parentId', this.state.parentId) // '3054936956jfdnsfsdkf0'
          // 获取二级分类列表显示
          this.getCategorys()
       })
       // setState()不能立即获取最新的状态: 因为setState()是异步更新状态的
       // console.log('parentId', this.state.parentId) // '0'
    }

    // 异步获取一级/二级分类   parentId: 如果没有指定根据状态中的parentId请求, 如果指定了根据指定的请求
    getCategorys = async (parentIda)=>{
      // 在发请求前, 显示loading
      this.setState({loading: true})
      // 函数传了参数 就按传的参数  获取数据  getCategorys 没有参数 就从 this.state里面获取 parentId值 发送请求 
      const parentId = parentIda ||  this.state.parentId;
      // const { parentId } = this.state;
      const res = await reqCategorys(parentId)
      // 在请求完成后, 隐藏loading
      this.setState({loading: false})
      if(res.status===0){
          // 取出分类数组(可能是一级也可能二级的)
          const categorys = res.data;
          console.log('getCategorys-------',res.data);
          if(parentId=== '0'){
              //  更新一级分类状态
              this.setState({
                categorys
              })
              console.log('parentId---4444',this.state.parentId);
              console.log('parentId---5555',parentIda);
              console.log('getCategorys--parent-after--render',categorys);
          }else{
             //  更新二级分类状态
             this.setState({
               subCategorys:categorys
             })
             console.log('parentId---6666',this.state.parentId);
             console.log('parentId---7777',parentIda);
          }
      }else{
         message.error('获取一级分类失败')
      }
    }
      /*
       为第一次render()准备数据
     */
    componentWillMount(){
       this.initColumns();
    }

    // 发Ajax请求  第一次 render 之后
    componentDidMount(){
       //  获取一级分类列表显示
       this.getCategorys()
    }

     render(){
       // 
       const { categorys,loading,parentId,subCategorys,parentName,showStatus } = this.state;
       console.log('categorys---render---6666',categorys);
       // 读取指定分类
       const  category  = this.category || {}
        // card的左侧
       const title = this.state.parentId === '0' ? '一级分类列表':(
         <span>
           <LinkButton onClick={this.showCategorys}>一级分类列表</LinkButton>
           <Icon type='arrow-right' style={{marginRight: 5}} />
           <span>{parentName}</span>
         </span>
       )
      // Card的右侧
      const extra = (
        <Button type='primary' onClick={this.showAdd}>
          <Icon type='plus'/>
           添加
        </Button>
      )
    
      // const dataSource = [
      //   {
      //     "parentId":"0",
      //     "_id":"2845hkfd9ehdlsdjadsadj",
      //     "name":"家用电器",
      //     "__v":0
      //   }
      // ];

      // const columns = [
      //   {
      //     title: '姓名',
      //     dataIndex: 'name',
      //   },
      //   {
      //     title: '操作',
      //     width:300,
      //     render: (category) => (
      //       <span>
      //         <LinkButton onClick={ ()=>{ this.showUpdate(category)   }}>修改分类</LinkButton>
      //          { /* onClick={this.showSubCategorys(category)} 渲染的时候就调用 showSubCategorys方法
      //          <LinkButton onClick={this.showSubCategorys(category)}>查看子分类</LinkButton> 
      //          需要点击的时候调用
      //         */}
      //         {/*如何向事件回调函数传递参数: 先定义一个匿名函数, 在函数调用处理的函数并传入数据*/}
      //         { this.state.parentId==='0' ? <LinkButton onClick={ ()=>{  this.showSubCategorys(category) } }>查看子分类</LinkButton>: null }
      //       </span>
      //     )
      //   }
      // ]

      return (
        <Card title={title} extra={extra}>
         
           <Table dataSource={parentId==='0' ? categorys : subCategorys } bordered rowKey="_id" 
           columns={this.columns}
           loading={loading}
           pagination={{defaultPageSize:5,showQuickJumper:true}} />
          
          {/*
           <Table dataSource={dataSource} bordered  rowKey="dataSource._id"
           columns={columns}
           loading={loading}
           pagination={{defaultPageSize:5,showQuickJumper:true}} /> */
           }
           <Modal
            title="添加分类"
            visible={showStatus===1}
            onOk={this.addCategory}
            onCancel={this.handleCancel}
           >
          <AddForm categorys={categorys}  parentId={parentId} setForm={(form)=>{ this.form = form }} />
         </Modal>

         <Modal
          title="修改分类"
          visible={showStatus===2}
          onOk={this.updateCategory}
          onCancel={this.handleCancel}
         >
         <UpdateForm categoryName={category.name} setForm={(form)=>{ this.form = form }} />
        </Modal>

        </Card>)
    }
}